<template>
	<div style="height: 100%;">
		<content-container  :style="`background-color: ${Bgcolor}`">
			<!--测试-->
			<carousel v-for="(item, index) in pageTree.content[type.Carousel]" :key="index" :bannerid="item.id" v-sdrag:real="{id: item.id, com: item.id, type: type.Carousel}">
			</carousel>
			<user-card v-for="(item, index) in pageTree.content[type.UserCard]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.UserCard}">
			</user-card>
			<!--真实-->
			<activitiesbanner :list="getBannerlist(item.id)" :bannerid="item.id" v-for="(item, index) in pageTree.content[type.activitiesbanner]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesbanner}">
			</activitiesbanner>

			<new-zone :list="getNewZonelist(item.id)" v-for="(item, index) in pageTree.content[type.NewZone]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.NewZone}">
			</new-zone>

			<activities-three-pic :list="getthreePiclist(item.id)" v-for="(item, index) in pageTree.content[type.activitiesThreePic]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesThreePic}">
			</activities-three-pic>

			<activities-slide-pic :list="getslidePiclist(item.id)" v-for="(item, index) in pageTree.content[type.activitiesSlidePic]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesSlidePic}">
			</activities-slide-pic>

			<activities-new-bot :list="getNewBotlist(item.id)" v-for="(item, index) in pageTree.content[type.activitiesNewBot]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesNewBot}">
			</activities-new-bot>

			<activities-two-pro :list="getTwoProlist(item.id)" :twoproid="item.id" v-for="(item, index) in pageTree.content[type.activitiesTwoPro]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesTwoPro}">
			</activities-two-pro>

			<activities-one-pro :list="getOneProlist(item.id)" :oneproid="item.id" v-for="(item, index) in pageTree.content[type.activitiesOnePro]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesOnePro}">
			</activities-one-pro>

			<activities-nine-pro :list="getNineProlist(item.id)" v-for="(item, index) in pageTree.content[type.activitiesNinePro]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesNinePro}">
			</activities-nine-pro>

		</content-container>
	</div>
</template>
<script>
	import ContentContainer from "../../../real-components/ContentContainer";
	import Carousel from "./Carousel";
	import UserCard from "./UserCard";
	//真实
	import NewZone from "../../GoodsForSF/NewZone";
	import activitiesbanner from "../../GoodsForSF/activitiesbanner";
	import activitiesThreePic from "../../GoodsForSF/threePic";
	import activitiesSlidePic from "../../GoodsForSF/slidePic";
	import activitiesNewBot from "../../GoodsForSF/NewBot";
	import activitiesTwoPro from "../../GoodsForSF/TwoPro";
	import activitiesOnePro from "../../GoodsForSF/OnePro";
	import activitiesNinePro from "../../GoodsForSF/NinePro";
	//引用配置文件
	import * as prefix from "../../../config/page-name/gw/virtualpagename-prefix";
	import { getPageNameOrVirtualPageName } from "../../../utils/getPageName";
	import getPageName from "../../../utils/getPageName";
	import { getPageTree, initDomTree } from "../../../utils/getPageTree";
	import axios from "axios";
	export default {
		data() {
			return {
				type: {
					Carousel: "HomeCarousel",
					UserCard: "UserCard",
					//真实
					NewZone: "NewZone",
					activitiesbanner: "activitiesbanner",
					activitiesThreePic: "activitiesThreePic",
					activitiesSlidePic: "activitiesSlidePic",
					activitiesNewBot: "activitiesNewBot",
					activitiesTwoPro: "activitiesTwoPro",
					activitiesOnePro: "activitiesOnePro",
					activitiesNinePro: "activitiesNinePro",
				},
				Bgcolor:'',
				//顶部大海报数据
				bannerdata: [],
				bannerdataid: "",
				//新人专区
				NewZone: [],
				NewZoneid: "",
				//三张图片
				threePicData: [],
				threePicid: "",
				//可滑动图片
				slidePicData: [],
				slidePicid: "",
				//新人专区底部
				NewBotData: [],
				NewBotid: "",
				//一排两个商品信息
				TwoProData: [],
				TwoProid: "",
				//独个商品
				OneProData: [],
				OneProid: "",
				//九宫格商品
				NineProData: [],
				NineProid: "",
			}
		},
		computed: {
			pageName() {
				return getPageNameOrVirtualPageName();
			},
			currentVDO() {
				return "";
			},
			activeIndex() {
				return this.$store.state.cjy.classifyIndex;
			},
			currentVirtualPageName() {
				return this.pageName + prefix.SELF_PAGE + (this.activeIndex + 1);
			},
			defaultVirtualDomObject() {
				return {
					header: [],
					content: [],
					footer: [],
					config: {}
				}
			},
			pageTree() {
				return Object.keys(getPageTree(this, this.pageName)).length ? getPageTree(this, this.pageName) : this.defaultVirtualDomObject;
			}
		},
		methods: {
			getsessionIddata() {
				this.sessionIddata = localStorage.getItem('sessionId');
				this.storeCodedata = localStorage.getItem('storeCode');
				if(this.pageConfig){
					this.Bgcolor = this.pageConfig.activitiesBgcolor;
				}
			},
			//顶部大海报数据
			queryBanner() {
				let url = window.api.goods_host + '/resourceConfig/mobile/posters';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.bannerdata = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getBannerlist(id) {
				this.bannerdataid = id
				return this.bannerdata[`${id}`]
			},
			//新人专区
			queryNewZone() {
				let url = window.api.goods_host + '/resourceConfig/mobile/newborn';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.NewZone = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getNewZonelist(id) {
				this.NewZoneid = id
				return this.NewZone[`${id}`]
			},
			//三张图片
			querythreePic() {
				let url = window.api.goods_host + '/resourceConfig/mobile/three_pic';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.threePicData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getthreePiclist(id) {
				this.threePicid = id
				return this.threePicData[`${id}`]
			},
			//可滑动图片
			queryslidePic() {
				let url = window.api.goods_host + '/resourceConfig/mobile/slide_pic';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.slidePicData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getslidePiclist(id) {
				this.slidePicid = id
				return this.slidePicData[`${id}`]
			},
			//新人专区底部
			queryNewBot() {
				let url = window.api.goods_host + '/resourceConfig/mobile/new_bot';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.NewBotData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getNewBotlist(id) {
				this.NewBotid = id
				return this.NewBotData[`${id}`]
			},
			//一排两个商品
			queryTwoPro() {
				let url = window.api.goods_host + '/resourceConfig/mobile/two_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.TwoProData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getTwoProlist(id) {
				this.TwoProid = id
				return this.TwoProData[`${id}`]
			},
			//独个商品
			queryOnePro() {
				let url = window.api.goods_host + '/resourceConfig/mobile/one_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.OneProData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getOneProlist(id) {
				this.OneProid = id
				return this.OneProData[`${id}`]
			},
			//九宫格商品
			queryNinePro() {
				let url = window.api.goods_host + '/resourceConfig/mobile/nine_pro';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.NineProData = data.data.data[0] ? data.data.data[0] : [];
					}
				})
			},
			getNineProlist(id) {
				this.NineProid = id
				return this.NineProData[`${id}`]
			},

			//初始化监听数据变化
			inite() {
				PSEvent.listen("changeStoreCode", () => {
					this.getsessionIddata()
					this.queryBanner()
					this.queryNewZone()
					this.querythreePic()
					this.queryslidePic()
					this.queryNewBot()
					this.queryTwoPro()
					this.queryOnePro()
					this.queryNinePro()
				});
				PSEvent.listen("postersUpdate", () => {
					this.queryBanner()
				});
				PSEvent.listen("newZoneUpdate", () => {
					this.queryNewZone()
				});
				PSEvent.listen("threePicUpdate", () => {
					this.querythreePic()
				});
				PSEvent.listen("slidePicUpdate", () => {
					this.queryslidePic()
				});
				PSEvent.listen("NewBotUpdate", () => {
					this.queryNewBot()
				});
				PSEvent.listen("TwoProUpdate", () => {
					this.queryTwoPro()
				});
				PSEvent.listen("OneProUpdate", () => {
					this.queryOnePro()
				});
				PSEvent.listen("NineProUpdate", () => {
					this.queryNinePro()
				});
				PSEvent.listen("BgcolorUpdate", () => {
					this.getsessionIddata()
				});
			},
			removeListen() {
				PSEvent.remove("changeStoreCode");
				PSEvent.remove("postersUpdate");
				PSEvent.remove("newZoneUpdate");
				PSEvent.remove("threePicUpdate");
				PSEvent.remove("slidePicUpdate");
				PSEvent.remove("NewBotUpdate");
				PSEvent.remove("TwoProUpdate");
				PSEvent.remove("BgcolorUpdate");
				PSEvent.remove("OneProUpdate");
				PSEvent.remove("NineProUpdate");
			},
		},
		components: {
			"content-container": ContentContainer,
			"carousel": Carousel,
			UserCard,
			activitiesbanner,
			NewZone,
			activitiesThreePic,
			activitiesSlidePic,
			activitiesNewBot,
			activitiesTwoPro,
			activitiesNinePro,
			activitiesOnePro,
		},
		created() {
			// console.log("created-0-0-0-0-0-0-0-0-0", this.currentVirtualPageName);
			// console.log("dfdfdfdfd", this.currentVirtualPageName);

			// this.$store.commit("gw/setVirtualPageName", this.currentVirtualPageName);
		},
		mounted() {
			initDomTree(this.$store.getters.getDomTree[this.pageName]);
			this.$store.commit("setFirstInitDom", {
                header: this.currentVirtualPageName + "-header",
                footer: this.currentVirtualPageName + "-footer",
                content: this.currentVirtualPageName + "-content",
            });
			//设置对应的虚拟页面
			this.$store.commit("gw/setVirtualPageName", this.currentVirtualPageName);
			this.inite()
			this.getsessionIddata()
			this.queryBanner()
			this.queryNewZone()
			this.querythreePic()
			this.queryslidePic()
			this.queryNewBot()
			this.queryTwoPro()
			this.queryOnePro()
			this.queryNinePro()
		},
		updated() {
			initDomTree(this.$store.getters.getDomTree[this.pageName]);
		},
		beforeDestroy() {
			// console.log("beforeDestroy-0-0-0-0-0-0-0-0-0", this.currentVirtualPageName);
			this.$store.commit("setFirstInitDom", {
                header: "",
                footer: "",
                content: "",
            });
			this.$store.commit("gw/setVirtualPageName", "");
			this.removeListen()
		},
		watch: {
			//顶部大海报数据
			bannerdata() {
				this.getBannerlist(this.bannerdataid)
			},
			//新人专区
			NewZone() {
				this.getNewZonelist(this.NewZoneid)
			},
			//三张图片
			threePicData() {
				this.getthreePiclist(this.threePicid)
			},
			//可滑动图片
			slidePicData() {
				this.getslidePiclist(this.slidePicid)
			},
			//新人专区底部
			NewBotData() {
				this.getNewBotlist(this.NewBotid)
			},
			//一排两个商品
			TwoProData() {
				this.getTwoProlist(this.TwoProid)
			},
			//独个商品
			OneProData() {
				this.getOneProlist(this.OneProid)
			},
			//九宫格商品
			NineProData() {
				this.getNineProlist(this.NineProid)
			},
		}
	}
</script>
<style scoped>

</style>